$(function () {
  // 自定义验证规则
  layui.form.verify({
    title: [/^.{1,30}$/, '必须是1到30位字符']
  })

  // 获取文章分类
  initCateList()

  // 获取文章分类函数
  function initCateList() {
    axios.get('/my/cate/list').then(({ data: res }) => {
      if (res.code === 0) {
        const rows = []
        res.data.forEach((item) => {
          rows.push(`<option value="${item.id}">${item.cate_name}</option>`)
        })
        $('[name="cate_id"]').append(rows)

        // 让 layui 忽略美化
        $('.ql-toolbar select').attr('lay-ignore', '')
        // 告诉layui重新渲染表单中的 select 下拉菜单
        layui.form.render('select')
        $('.ql-toolbar select').hide()

      }
    })
  }

  // 工具栏的配置
  var toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike', 'image'],        // toggled buttons
    ['blockquote', 'code-block'],

    [{ 'header': 1 }, { 'header': 2 }],               // custom button values
    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
    [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
    [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
    [{ 'direction': 'rtl' }],                         // text direction

    [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

    [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
    [{ 'font': [] }],
    [{ 'align': [] }],

    ['clean']                                         // remove formatting button
  ];
  // 创建富文本编辑器的实例
  var quill = new Quill('#editor', {
    modules: {
      toolbar: toolbarOptions
    },
    theme: 'snow'
  })

  // 文章封面
  $('.btn-choose-img').on('click', function () {
    $('#file').click()
  })
  let file = null
  $('#file').on('change', function (e) {
    const files = e.target.files
    if (files.length === 0) return file = null
    const imgURL = URL.createObjectURL(files[0])
    $('#image').attr('src', imgURL)
    file = files[0]
  })

  // 发布文章
  let state = '已发布'
  $('.btn_cg').on('click', function () {
    state = '草稿'
  })
  $('.btn_pub').on('click', function () {
    state = '已发布'
  })
  $('.form-pub').on('submit', function (e) {
    e.preventDefault()
    if (!file) return layer.msg('请选择文章封面！')
    let fd = new FormData()
    fd.append('title', $('[name="title"]').val())
    fd.append('cate_id', $('[name="cate_id"').val())
    fd.append('content', quill.root.innerHTML)
    fd.append('state', state)
    fd.append('cover_img', file)
    // 打印 fordata 数据
    fd.forEach((value, key) => {
      console.log(key, value);
    })
    axios.post('/my/article/add', fd).then(({ data: res }) => {
      if (res.code === 0) {
        window.parent.highlight('文章列表')
        location.href = '/article/art_list.html'
      }
    })
  })
})